<template>
  <div class="support">
    <el-image
      style="width: 100%; height: 250px"
      :src="require('../assets/1.jpg')"
      fit="cover"
    ></el-image>
    <div class="support_card">
      <el-row
        :gutter="20"
        v-for="(item, index) in tableData"
        :key="index"
        class="teach_item"
        @click.native="bindteach(item.id)"
      >
        <el-col :span="4">
          <el-image
            style="width: 100%; height: 280px"
            :src="item.url"
            fit="cover"
          ></el-image>
        </el-col>
        <el-col :span="20">
          <div class="item_center">
            <div class="center_title">{{ item.name }}</div>
            <div class="center_info">{{ item.descr }}</div>
            <div class="center_info1">
              <div style="margin: 20px 0">目标金额：￥{{ item.money }}元</div>
              <el-progress
                :text-inside="true"
                :stroke-width="20"
                :percentage="item.compile"
                status="exception"
              >
              </el-progress>
              <el-row :gutter="20" style="margin: 20px 0">
                <el-col :span="6">已筹集：￥{{ item.alIn }}元</el-col>
                <el-col :span="6" :offset="6"
                  >支持次数：{{ item.support }}次</el-col
                >
              </el-row>
            </div>
            <div style="width: 100%; text-align: right">
              <el-button type="warning" round>查看详情</el-button>
            </div>
          </div>
        </el-col>
      </el-row>
      <div class="pagination">
        <el-pagination
          background
          @current-change="handleCurrentChange"
          :current-page.sync="pageNo"
          layout="total, prev, pager, next"
          :total="total"
        >
        </el-pagination>
      </div>
    </div>

    <el-backtop></el-backtop>
  </div>
</template>

<script>
export default {
  data() {
    return {
      total: 10,
      pageNo: 1,
      tableData: [],
      url: "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
    };
  },
  methods: {
    handleCurrentChange(pageNo) {
      this.pageNo = pageNo;
      this.getData();
    },
    bindteach(event) {
      this.$router.push({
        path: "/supportdetails",
        query: {
          id: event,
        },
      });
    },
    getData() {
      this.$http
        .postRequest("main/support/show/list", {
          pNum: this.pageNo,
          pSize: 10,
        })
        .then((res) => {
          console.log(res.data);
          if (res.code === 0) {
            res.data.forEach((item) => {
              item.compile =
                item.money == 0
                  ? 0
                  : Number(((item.alIn / item.money) * 100).toFixed(2));
            });
            this.tableData = res.data;
            this.total = res.totalSize;
          }
        })
        .catch((error) => {
          console.log(error);
        });
    },
  },
  mounted() {
    this.getData();
  },
};
</script>

<style scoped>
.support {
  padding-bottom: 30px;
}

.support_card {
  width: 80%;
  margin: auto;
}

/* 
	.teach_item:hover {
		border: 1px solid #425994;
		box-shadow: 0 2px 4px rgba(0, 0, 0, .12);
		cursor: pointer
	}

	.teach_item:hover .arrow {
		background: #425994;
		color: #FFFFFF;
	} */

.teach_item {
  margin-top: 13px;
  padding-left: 20px;
  padding-top: 23px;
  padding-bottom: 26px;
  border: 1px solid #eeeeee;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12);
  cursor: pointer;
}

.center_title {
  font-size: 16px;
  font-weight: bold;
  color: #000000;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.center_info {
  font-size: 14px;
  font-weight: 400;
  color: #535353;
  margin-top: 21px;
  line-height: 1.5;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4;
}

.center_info1 {
  margin: 20px 40px 20px 0;
}
</style>
